const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {

	mode: "development",

	entry: './index.js',

	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
	},
	devServer: {
		contentBase: './dist'
	},
	module: {
		rules: [{
			test: /\.scss$/,
			// use: [{
			// 	loader: "style-loader" // 将 JS 字符串生成为 style 节点
			// }, {
			// 	loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
			// }, {
			// 	loader: "sass-loader" // 将 Sass 编译成 CSS
			// }]
			use: ExtractTextPlugin.extract({
				fallback: 'style-loader',
				//如果需要，可以在 sass-loader 之前将 resolve-url-loader 链接进来
				use: ['css-loader', 'sass-loader']
			})
		}, {
			test: /\.(png|jpg|gif)$/,
			use: [
				{
					loader: 'url-loader',
					options: {
						limit: 8192
					}
				}
			]
		}]
	},

	plugins: [
		new HtmlWebpackPlugin({
			title: 'bd',
			template: './index.html'
		}),
		new ExtractTextPlugin('style.css'),
		//将单个文件或整个目录复制到构建目录
		new CopyWebpackPlugin([
			{ from: 'lib', to: 'lib/' },
		])
	]
}